<!--
 * @Author: your name
 * @Date: 2020-01-18 15:59:48
 * @LastEditTime: 2020-04-10 15:14:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \knowledge\canvas\demo.html
 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas 绘图</title>
    <style>
        .canvas-class{
            border: 1px solid #999;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="2480" height="3508" class="canvas-class"></canvas>
    <button onclick="go()">生成</button>
    <script>
        
        var ctx;
        window.onload =function(){
             // 获取画布元素
            var canvas = document.getElementById("canvas");
            ctx = canvas.getContext('2d');
            var img = new Image();
            img.setAttribute("crossOrigin","Anonymous");  
            //img.src="./img/first.png";
            img.src = "http://112.74.59.15:5005//upload///00000000-0000-0000-0000-000000000000/383765ed-8e95-412d-8b2d-4291d5538569.jpg";
            //http://112.74.59.15:5005//upload///00000000-0000-0000-0000-000000000000/383765ed-8e95-412d-8b2d-4291d5538569.jpg
                  
            img.onload =function(e){
                console.log(e);
                ctx.drawImage(img,734,1000,1011,638);            
            }
            var img2 = new Image();
            // img2.src= "./img/scond.png";
            img2.setAttribute("crossOrigin","Anonymous");     
            img2.src="http://112.74.59.15:5005//upload///00000000-0000-0000-0000-000000000000/383765ed-8e95-412d-8b2d-4291d5538569.jpg";
            //img.src = "http://112.74.59.15:5005//upload///00000000-0000-0000-0000-000000000000/383765ed-8e95-412d-8b2d-4291d5538569.jpg";
            img2.onload =function(e){
                console.log(e)
                ctx.drawImage(img2,734,1850,1011,638);
            }
            
        }
        function go(){
            var info = ctx.canvas.toDataURL('image/png');            
            console.log(info);
        }
        
    </script>
</body>

</html>